{extend name="main" /}

{block name="title"}管理{/block}
{block name="body"}

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form id="myForm" lay-filter="myForm" class="layui-form toolbar">
                <div class="layui-form-item" id="search">

					<div class="layui-inline">
						<label class="layui-form-label">关键字：</label>
						<div class="layui-input-inline">
							<input name="keywords" class="layui-input" autocomplete="off" placeholder="输入关键字"/>
						</div>
					</div>

                    <div class="layui-inline">
						<label class="layui-form-label">创建时间</label>
						<div class="layui-input-inline">
							<input name="createDateSel" class="layui-input" placeholder="选择日期范围" autocomplete="off"/>
						</div>
					</div>

					
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
						<button class="layui-btn icon-btn" lay-filter="mxReset" lay-submit>
							<i class="layui-icon">&#xe669;</i>重置
						</button>
                    </div>
                </div>
            </form>

			<table id="myTable" lay-filter="myTable"></table>

        </div>
    </div>
</div>

<script type="text/html" id="TbVerify">
    <input type="checkbox" lay-filter="TbVerifyCk" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.field_verify==1?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
</script>

<script type="text/html" id="TbShow">
    <input type="checkbox" lay-filter="TbShowCk" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.field_show==1?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
</script>

<script type="text/html" id="TableShow">
    <input type="checkbox" lay-filter="TableShowCk" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.field_tbshow==1?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
</script>

<script type="text/html" id="TableExport">
    <input type="checkbox" lay-filter="TableExportCk" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.field_export==1?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
</script>

<!-- 主表中的操作按钮模版 --> 
<script>
	//获取父级参数
    var mData = "";
    var modelId=0;
    function child(obj){
        mData = JSON.parse(obj);
        modelId=mData.id;
        console.log(modelId);

    }
    
	var curId=0;
	//表格数据
	var tableData=[];
	


	//Layui主运行函数
    layui.use(['form','admin','laydate','table','tableEdit','soulTable'], function () {
		 laydate = layui.laydate;
         table = layui.table;
            soulTable = layui.soulTable;
			tableEdit = layui.tableEdit;
            form = layui.form;
            $ = layui.$;

	

		

		/* 渲染时间选择 */
        laydate.render({
            elem: 'input[name="createDateSel"]',
            type: 'date',
            range: true,
            trigger: 'click'
        });
        // 保存

        /* 显示费用分类表单弹窗 */
        function showSelView() {
             var layIndex = layer.open({
                type: 2,
                title: '选择表',
                shade: 0.5,
                fixed: false,
                area: ['80%','80%'],
                content: "{:url('table/action/seltableview')}",
                success: function (layero, index) {
                    if(mData){
                        var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                        iframe.child(JSON.stringify(mData))//向此iframe层方法 传递参数
                    }
                }
            });
        }

		

        
		
		//右键菜单配置
		var rightMenu = {
			// 表格内容右键菜单配置
			body: [
				{
				   name: '复制单元格内容',
				   icon: 'layui-icon layui-icon-app',
				   click: function(obj) {
					   soulTable.copy(obj.text);
					   layer.msg('复制成功！');
				   }
				},			
				{
					name: '高亮当前行',
					icon: 'layui-icon layui-icon-light',
					click: function(obj) {
						obj.trElem.css('color', '#ff0000');
						obj.trElem.css('background', '#fff071');
					}
				},
				{
					name: '文字标红',
					icon: 'layui-icon layui-icon-rate-half',
					click: function(obj) {
					  obj.elem.css('color', 'red');
					}
				}
			]
		};
		
		//表格列配置
		var cols = [	
            {field: 'table_name_zh', title: '表名称'},
            {field: 'field_name_zh', title: '字段名称'},
            {field: 'field_show', title: '表单显示', templet: '#TbShow', align: 'center', sort: true, width: 100},
            {field: 'field_verify', title: '表单必填', templet: '#TbVerify', align: 'center', sort: true, width: 100},
            {field: 'field_tbshow', title: '表格显示', templet: '#TableShow', align: 'center', sort: true, width: 100},
            {field: 'field_export', title: '导出选项', templet: '#TableExport', align: 'center', sort: true, width: 100},
            {field: 'cdate', title: '创建时间',width: 170},
			{fixed: 'right',title: '操作',toolbar: '#authTbBar',align:'center', width: 90}			
		];		
		
		//创建表格
        myTable = table.render({
            elem: '#myTable'
            ,url: "{:url('table/action/modelfieldlist')}?action_id="+modelId
			,data:tableData
			,toolbar: ['<p>',
               // '<button lay-event="selTableView" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>选择表</button>&nbsp;',
				//'<button type="button" class="layui-btn mgl-20" id="addOrders" lay-filter="addOrders" lay-submit><i class="layui-icon">&#xe624;</i>订单退款</button>',
                '</p>'].join('')
            ,page: {limit: 20}
            ,limits: [20, 50, 100, 200, 500]
			,height: $(document).height() - $('#myTable').offset().top - 40
			,even: true //开启隔行背景
  			//,size: 'sm' //小尺寸的表格
			,limit: 20 //分页记录条数
			,autoSort: false
			,contextmenu: rightMenu	//右键菜单	
            ,cols: [cols] //表格列的配置
			,filter: {  //开启表格筛选配置
				items:['column','clearCache'],
				bottom: false,
				cache: true
			}	
            ,done: function (res) { //表格创建完毕后的回调方法
                console.log(res);

            },
			parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
			
        });

        /* 表格2头工具栏点击事件 */
        table.on('toolbar(myTable)', function (obj) {
            if (obj.event === 'selTableView') { // 添加
                showSelView();
            }
        });

        /* 表格搜索 */
        form.on('submit(mxTbSearch)', function (data) {
            myTable.reload({where: data.field, page:1,limits:20});
            return false;
        });

        /* 修改用户状态 */
        form.on('switch(TbShowCk)', function (obj) {
            upStatus(obj,'show');
        });

        /* 修改用户状态 */
        form.on('switch(TbVerifyCk)', function (obj) {
            upStatus(obj,'verify');
        });

        /* 修改用户状态 */
        form.on('switch(TableShowCk)', function (obj) {
            upStatus(obj,'tableshow');
        });

        /* 修改用户状态 */
        form.on('switch(TableExportCk)', function (obj) {
            upStatus(obj,'TableExport');
        });

        function upStatus(obj,field){
            var loadIndex = layer.load(2);
            $.post("{:url('table/action/tbstatus')}", {
                id: obj.elem.value,
                selflag:field,
                status: obj.elem.checked ? 1 : 0
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 1) {
                    layer.msg(res.msg);
                    myTable.reload();
                } else {
                    layer.msg(res.msg, {icon: 5, anim: 6});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        }


	
		
    });

	
</script>
{/block}
